<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>数学</title>
	<style>
		#container {
			text-align: center;
			width: 500px;
			height: 900px;
			background: rgb(247, 238, 214);
			margin-left: 40px;
			margin-right: 40px;
			margin-top: 40px;
			padding-top: 20px;
			float: left;
		}

		#container-r {
			text-align: center;
			width: 500px;
			height: 900px;
			background: rgb(187, 185, 181);
			margin-left: 40px;
			margin-right: 40px;
			margin-top: 40px;
			padding-top: 20px;
			float: left;
		}
	</style>
</head>

<body>
	<div id="container"></div>
	<div id="container-r">
		<h2 id="score">得分:</h2>
		<h2>交卷：D</h2>
	</div>
	<script>
		var count = 0;
		var resultLimit = 10;
		var mainContainer = document.getElementById("container");
		var problems = new Array();
		var opt = "+";
		var score = 0;

		_main_();

		function _main_() {
			createPrombles();
			display();
		}

		function createPrombles() {
			while (count < 10) {
				var nbr1 = randomNbr();
				var nbr2 = randomNbr();
				if (resultBetween(nbr1, nbr2, resultLimit - 10, resultLimit)) {
					var problem = new Problem(nbr1, nbr2, opt);
					if (!isExists(problem)) {
						addProblem(problem);
						count++;
					}
				}
			}
		}

		function isExists(problem) {
			for (var i = 0; i < problems.length; i++) {
				if (problems[i].equals(problem)) {
					return true;
				}
			}
			return false;
		}

		function addProblem(problem) {
			problems.push(problem);

		}

		function resultBetween(a, b, floor, ceiling) {
			var n = a + b;
			return floor < n && n < ceiling;
		}

		function display() {
			var text = "";
			for (var i = 0; i < problems.length; i++) {
				text += "<h1 class='problem'>" + problems[i].toString() + "</h1>";
			}
			mainContainer.innerHTML = text;
			bindEvent();
			bindSubmit();
		}

		function bindEvent() {
			var elements = document.getElementsByClassName("problem");
			for (var i = 0; i < elements.length; i++) {
				elements[i].index = i;
				elements[i].onclick = function () {
					var input = prompt(problems[this.index].toString() + "  Answer:");
					if (input != null && input != "" && !isNaN(input)) {
						problems[this.index].answer = parseInt(input);
						this.innerHTML = problems[this.index].show();
					}

				}
			}
		}

		function bindSubmit() {
			document.onkeydown = function (event) {
				var e = event || window.event || arguments.callee.caller.arguments[0];
				if (e && e.keyCode == 68) { // D 
					var isFirst = score == 0;
					score = 0;
					var elements = document.getElementsByClassName("problem");
					for (var i = 0; i < elements.length; i++) {
						var p = problems[i];
						if (p.isCorrect()) {
							score += 10;
							elements[i].style.color = "black";
						} else {
							elements[i].style.color = "red";
						}
					}
					if(score == 100 && isFirst) {
						var img = document.createElement("img");
						img.src = "shell.png";
						document.getElementById("container-r").appendChild(img);
					}
					showScore();
				}

			}
		}

		function showScore() {
			var s = document.getElementById("score");
			s.innerHTML = "得分:" + score;
		}

		function randomNbr() {
			return parseInt(Math.random() * (resultLimit - 1) + 1);
		}

		function Problem(a, b, opt) {
			this.a = a;
			this.b = b;
			this.answer = null;
			this.opt = opt;
			this.isCorrect = function () {
				if (opt == "+") {
					return this.a + this.b == this.answer;
				}
				if (opt == "-") {
					return this.a - this.b == this.answer;
				}
				return false;
			}
			this.toString = function () {
				if (opt == "+") {
					return this.a + "+" + this.b + "=?";
				}
				if (opt == "-") {
					return this.a + "-" + this.b + "=?";
				}
				return "";
			};
			this.equals = function (other) {
				return this.toString() == other.toString();
			};
			this.show = function () {
				if (this.answer == null) {
					reutrn;
				}
				if (opt == "+") {
					return this.a + "+" + this.b + "=" + this.answer;
				}
				if (opt == "-") {
					return this.a + "-" + this.b + "=" + this.answer;
				}
				return "";
			};
		}

	</script>
</body>

</html>
